<template>
	<view class="container">
		<!-- Custom Header (Non-Homepage, Logged-in State) -->
		<custom-header :isHomepage="false"></custom-header>

		
		<!-- Page Title -->
		<text class="page-title">纪念馆管理</text>

		<!-- Main Content Area (List of Memorial Cards) -->
		<view class="main-content">

			<!-- Memorial Hall Entry (Loop through data) -->
			<view class="memorial-card" v-for="(memorial, index) in memorialList" :key="index">
				<!-- Memorial Title -->
				<view class="memorial-card-title">{{ memorial.name }}</view>

				<view class="memorial-card-content">
					<!-- Left Section: Image and Links -->
					<view class="card-left">
						<image class="memorial-image" :src="memorial.avatar" mode="aspectFill"></image>
						<!-- Replace with actual memorial image -->
						<view class="card-link" @click="handleUploadAvatar(memorial)">上传头像</view>
						<view class="card-link" @click="handleEnterMemorial(memorial)">进入纪念馆</view>
					</view>

					<!-- Right Section: Info and Buttons -->
					<view class="card-right">
						<!-- Info Lines -->
						<view class="info-block">
							<view class="info-line">
								<text class="info-label">纪念馆编号:</text>
								<text class="info-value">{{ memorial.id }}</text>
							</view>
							<view class="info-line">
								<text class="info-label">纪念状态:</text>
								<text class="info-value">未审核</text>
								<text class="upgrade-link" @click="handleUpgrade(memorial)">升级纪念馆</text>
							</view>
							<view class="info-line">
								<text class="info-label">纪念馆类别:</text>
								<text class="info-value">{{ memorial.type == 1 ? '普通馆' : memorial.type == 2 ? '豪华馆' : '尊贵馆' }} （{{ memorial.is_double == 1 ? '双人' : '单人' }}）</text>
								<!-- <text class="setting-link" @click="handleSetting(memorial)">设置</text> -->
							</view>
							<view class="info-line visits-line">
								<text class="info-label">浏览次数:</text>
								<text class="info-value">{{ memorial.visit }}</text>
								<text class="creation-date">创建于{{ memorial.create_time }}</text>
							</view>
						</view>

						<!-- Management Buttons Grid -->
						<view class="management-buttons-grid">
							<view class="grid-button" v-for="(button, btnIndex) in manageButtons"
								:key="btnIndex" @click="handleButtonClick(memorial, button)">
								{{ button.label }}
								<text class="grid-button-dot" v-if="button.hasDot"></text> <!-- Red dot -->
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- End Memorial Hall Entry Loop -->

			<!-- Create Memorial Button -->
			<button class="create-memorial-button" @click="handleCreateMemorial">创建纪念馆</button>

		</view>
		<!-- End Main Content Area -->

		<Footer></Footer>

	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue';
	import CustomHeader from '@/components/header/index.vue'; // Adjust path as needed
	import Footer from '@/components/footer/index.vue'; // Adjust path as needed
	import { apiMyMemorialLists, apiMyMuDelete } from '@/api/graveyard'
	// Sample data for memorial list
	const memorialList = ref([])
	const manageButtons = ref([
		{
			label: '修改纪念馆资料',
			actionKey: 'modifyInfo'
		},
		{
			label: '墓园设置',
			actionKey: 'cemeterySetting',
			hasDot: true
		},
		{
			label: '纪念馆模板设置',
			actionKey: 'templateSetting'
		},
		{
			label: '纪念馆亲友',
			actionKey: 'relatives'
		},
		{
			label: '留言管理',
			actionKey: 'guestbookManagement'
		},
		{
			label: '评论管理',
			actionKey: 'commentManagement'
		},
		{
			label: '纪念文章',
			actionKey: 'articles'
		},
		{
			label: '纪念相册',
			actionKey: 'albums'
		},
		{
			label: '纪念视频',
			actionKey: 'videos'
		},
		{
			label: '转为双人馆',
			actionKey: 'convertToCouple'
		}, // Last button, separate row in screenshot
	]) 

	// Ensure auth state is loaded when the page mounts (especially for H5 refresh)
	onMounted(() => {
		getapiMyMemorialLists()
	});
	
	// 上传头像
	// --- Page Specific Event Handlers ---
	const handleUploadAvatar = (memorial) => {
		console.log('Upload Avatar clicked for memorial:', memorial.id);
		// Implement logic for image upload
	};

	// 进入纪念馆
	const handleEnterMemorial = (memorial) => {
		console.log('Enter Memorial clicked for memorial:', memorial.id);
		// Navigate to the memorial detail page
		uni.navigateTo({
			url: `/pages/individualSpace/index?id=${memorial.id}`
		}); // Example navigation with parameter
	};
	// 升级纪念馆
	const handleUpgrade = (memorial) => {
		console.log('Upgrade Memorial clicked for memorial:', memorial.id);
		// Navigate to upgrade page
		uni.navigateTo({
			url: '/pages/graveyardManage/levelUpGraveyard/index'
		})
	};
	// 设置状态
	const handleSetting = (memorial) => {
		console.log('Setting clicked for memorial:', memorial.id);
		// Navigate to setting page
	};

	// 跳转
	const handleButtonClick = (memorial, button) => {
		console.log(`Button "${button.label}" clicked for memorial: ${memorial.id}, Action: ${button.actionKey}`);
		// Implement logic based on button.actionKey (e.g., navigate to different management sub-pages)
		switch (button.actionKey) {
			case 'modifyInfo':
				uni.navigateTo({
					url: `/pages/graveyardManage/editGraveyard/index?id=${memorial.id}`
				});
				break;
			case 'cemeterySetting':
				uni.navigateTo({
					url: `/pages/graveyardManage/setGraveyard/index?id=${memorial.id}`
				});
				break;
			case 'convertToCouple':
				console.log('Initiate convert to couple process');
				break;

			case 'guestbookManagement':
				uni.navigateTo({
					url: `/pages/graveyardManage/leaveMessage/index?id=${memorial.id}`
				})
				break;
			case 'articles':
				uni.navigateTo({
					url: '/pages/graveyardManage/article/index?id=' + memorial.id
				})
				break;
			case 'albums':
				uni.navigateTo({
					url: '/pages/graveyardManage/album/index?id=' + memorial.id
				})
				break;
			case 'videos':
				uni.navigateTo({
					url: '/pages/graveyardManage/video/index'
				})
				break;
			case 'templateSetting':
				uni.navigateTo({
					url: '/pages/graveyardManage/setMemorial/index'
				})
			default:
				break;
		}
	};
	
	// 建立纪念馆
	const handleCreateMemorial = () => {
		console.log('Create Memorial button clicked');
		// Navigate to the page for creating a new memorial
		uni.navigateTo({
			url: '/pages/graveyardManage/quickCreation/index'
		}); // Replace with actual path
	};
	
	
	
	// 获取数据
	const getapiMyMemorialLists = async () => {
		await apiMyMemorialLists().then(res=>{
			console.log(res)
			if(res.code == 1){
				memorialList.value = res.data
			}
		}).catch(error=>{
			console.log(error)
		})
		
	}
</script>

<style scoped>
	/* Scoped styles for this page */
	/* Reusing common styles from previous pages */
	.container {
		display: flex;
		flex-direction: column;
		min-height: 100vh;
		background-color: #f5f5f5;
		/* Match background color */
		padding-bottom: 40rpx;
		/* Add some padding at the bottom */
		box-sizing: border-box;
		/* Include padding in height calculation */
	}

	/* Custom Header - Styles are in CustomHeader.vue */
	/* Need padding on main content to clear fixed header */

	/* Banner Styles - Copied from previous pages */
	.banner {
		width: 100%;
		height: 300rpx;
		/* Adjust height as needed */
		position: relative;
		overflow: hidden;
	}

	.banner-bg {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
	}

	.banner-overlay {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding: 30rpx 40rpx;
		/* Adjust padding */
		color: #fff;
		/* Text color on banner */
		text-shadow: 1rpx 1rpx 2rpx rgba(0, 0, 0, 0.5);
	}

	.banner-title-area {
		display: flex;
		align-items: flex-end;
	}

	.banner-main-title {
		font-size: 50rpx;
		/* Adjust font size */
		font-weight: bold;
		margin-right: 20rpx;
	}

	.banner-sub-area {
		display: flex;
		flex-direction: column;
		font-size: 24rpx;
		/* Adjust font size */
	}

	.banner-url {
		font-size: 20rpx;
		/* Adjust font size */
	}

	.banner-slogan-area {
		display: flex;
		justify-content: flex-end;
		/* Align to the right */
		font-size: 36rpx;
		/* Adjust font size */
	}

	.banner-slogan {
		margin-left: 30rpx;
		/* Spacing between slogans */
		font-weight: bold;
	}

	/* Page Title */
	.page-title {
		font-size: 36rpx;
		font-weight: bold;
		text-align: center;
		margin-top: 40rpx;
		/* Space below banner */
		margin-bottom: 30rpx;
		/* Space above main content area */
		color: #333;
	}

	/* Main Content Area (Holds memorial cards and create button) */
	.main-content {
		/* No specific background or padding here, handled by individual cards */
		display: flex;
		flex-direction: column;
		align-items: center;
		/* Center cards and button horizontally */
		padding: 0 20rpx;
		/* Side padding for the whole content block */
	}

	/* Memorial Card Styles */
	.memorial-card {
		background-color: #fff;
		/* White background */
		width: 100%;
		/* Take full width within main-content padding */
		padding: 30rpx;
		/* Inner padding */
		border-radius: 10rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
		/* Subtle shadow */
		margin-bottom: 30rpx;
		/* Space between cards */
		box-sizing: border-box;
		/* Include padding in width */
	}

	.memorial-card-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 20rpx;
		/* Space below title */
	}

	.memorial-card-content {
		display: flex;
		/* Flex layout for left and right sections */
	}

	.card-left {
		width: 180rpx;
		/* Fixed width for the left section */
		margin-right: 30rpx;
		/* Space between left and right */
		display: flex;
		flex-direction: column;
		align-items: center;
		/* Center image and links */
		flex-shrink: 0;
		/* Prevent shrinking */
	}

	.memorial-image {
		width: 160rpx;
		/* Image size */
		height: 160rpx;
		border: 1rpx solid #ddd;
		/* Subtle border around image */
		border-radius: 5rpx;
		/* Subtle border radius */
		margin-bottom: 15rpx;
		/* Space below image */
		background-color: #eee;
		/* Placeholder background */
	}

	.card-link {
		font-size: 24rpx;
		/* Smaller font for links */
		color: #666;
		/* Gray color */
		margin-bottom: 10rpx;
		/* Space between links */
		text-align: center;
		/* Center link text */
	}

	.card-link:last-child {
		margin-bottom: 0;
	}


	/* Right Section: Info and Buttons */
	.card-right {
		flex: 1;
		/* Right section takes remaining space */
		display: flex;
		flex-direction: column;
	}

	.info-block {
		margin-bottom: 20rpx;
		/* Space below info block and before buttons */
		font-size: 26rpx;
		/* Base font size for info lines */
	}

	.info-line {
		display: flex;
		align-items: center;
		margin-bottom: 8rpx;
		/* Smaller space between info lines */
		word-break: break-word;
		/* Allow text to wrap */
	}

	.info-line:last-child {
		margin-bottom: 0;
	}

	.info-label {
		color: #333;
		margin-right: 10rpx;
		min-width: 120rpx;
		/* Align labels */
		flex-shrink: 0;
	}

	.info-value {
		color: #555;
		flex-shrink: 0;
		/* Prevent value from shrinking if action links exist */
	}

	.upgrade-link {
		color: red;
		/* Red color */
		font-size: 24rpx;
		/* Smaller font */
		margin-left: auto;
		/* Push to the right */
		flex-shrink: 0;
	}

	.setting-link {
		color: #ff9800;
		/* Orange color */
		font-size: 24rpx;
		/* Smaller font */
		margin-left: auto;
		/* Push to the right */
		flex-shrink: 0;
	}

	.visits-line {
		/* Specific style for visits line if needed, e.g., no auto margin on date */
	}

	.creation-date {
		font-size: 24rpx;
		/* Smaller font */
		color: #999;
		/* Gray color */
		margin-left: 20rpx;
		/* Space after visits count */
		flex-shrink: 0;
	}


	/* Management Buttons Grid */
	.management-buttons-grid {
		display: flex;
		flex-wrap: wrap;
		/* Allow items to wrap to the next line */
		/* No justify-content needed if widths and margins are correct */
		margin-left: -10rpx;
		/* Offset for left margin on buttons */
		margin-right: -10rpx;
		/* Offset for right margin on buttons */
	}

	.grid-button {
		/* Uniapp button default styles need override */
		width: calc(50% - 20rpx);
		/* Calculate width for 2 per row, account for 10rpx margin on both sides */
		height: 60rpx;
		/* Button height */
		line-height: 60rpx;
		/* Center text vertically */
		text-align: center;
		font-size: 24rpx;
		/* Smaller font size */
		color: #333;
		background-color: #eee;
		/* Light gray background */
		border: 1rpx solid #ddd;
		/* Subtle border */
		border-radius: 8rpx;
		/* Rounded corners */
		margin: 0 10rpx 20rpx 10rpx;
		/* Margin around buttons (top, right, bottom, left) */
		box-sizing: border-box;
		/* Include border and padding in size */
		position: relative;
		/* Needed for red dot */
		display: flex;
		/* Use flex to center text */
		align-items: center;
		justify-content: center;
	}

	/* Style for the last button ("转为双人馆") if it's on its own row */
	/* This might require adjusting the grid or handling the last button separately */
	/* For strict visual match, we'll just apply the same style, it will wrap naturally */


	/* Style for the red dot on the "墓园设置" button */
	.grid-button-dot {
		position: absolute;
		top: 5rpx;
		/* Adjust position from top */
		right: 5rpx;
		/* Adjust position from right */
		width: 15rpx;
		/* Size of the dot */
		height: 15rpx;
		background-color: red;
		border-radius: 50%;
	}


	/* Create Memorial Button */
	.create-memorial-button {
		/* Orange button style */
		width: calc(100% - 40rpx);
		/* Take full width minus main-content padding */
		height: 90rpx;
		/* Button height */
		line-height: 90rpx;
		font-size: 32rpx;
		color: #fff;
		background-color: #ff9800;
		/* Orange color */
		border: none;
		border-radius: 8rpx;
		text-align: center;
		margin-top: 20rpx;
		/* Space above button */
		margin-bottom: 0;
		/* No bottom margin needed before QR codes */
		display: flex;
		align-items: center;
		justify-content: center;
	}


	/* QR Codes Section - Copied from previous pages */
	.qr-codes-section {
		display: flex;
		justify-content: space-around;
		padding: 40rpx 0;
		/* Vertical padding */
		margin-top: 30rpx;
		/* Space above section */
		margin-left: 20rpx;
		/* Side margins to align with other sections */
		margin-right: 20rpx;
	}

	.qr-item {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.qr-image {
		width: 200rpx;
		height: 200rpx;
		/* Need actual images */
		background-color: #eee;
		/* Placeholder background */
	}

	.qr-label {
		font-size: 26rpx;
		color: #555;
		margin-top: 10rpx;
	}


	/* Footer Styles - Copied from previous pages */
	.footer {
		margin-top: 40rpx;
		padding: 40rpx 20rpx;
		background-color: #f0f0f0;
		/* Light gray background */
		text-align: center;
		margin-top: auto;
		/* Push footer to the bottom */
		box-sizing: border-box;
	}

	.footer-links {
		font-size: 26rpx;
		color: #555;
		margin-bottom: 20rpx;
	}

	.footer-links text {
		margin: 0 10rpx;
	}

	.footer-copyright {
		font-size: 22rpx;
		color: #888;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.footer-copyright text {
		margin-bottom: 5rpx;
	}

	/* Padding to clear the fixed header */
	.page-content-wrapper {
		padding-top: 88rpx;
		/* Height of the fixed header */
		flex: 1;
		/* Allow content to take space */
		display: flex;
		flex-direction: column;
	}
</style>